<script setup>
import {ref} from "vue";
import {useRouter} from "vue-router";
import {ElMessage, ElMessageBox} from 'element-plus';
import {loginService} from "@/api/login";
import {userLoginStore} from "@/stores/modules/userLogin.js";

const loginForm = ref({
  account: "",
  password: "",
});
const loginFormRef = ref({
  accont: "",
  password: "",
});

const rules = {
  account: [
    { required: true, message: "请输入账号", trigger: "blur" },
    { type: "string", message: "账号格式不正确", trigger: ["blur", "change"] },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    },
  ],
};

const router = useRouter();
const loginStore = userLoginStore();

const login = async () => {
  try {
    const res = await loginService(loginForm.value);
    if (res.status == 200) {
      loginStore.$patch({
        token: res.data.data.token,
        id: res.data.data.id,
        account: res.data.data.account,
        type: res.data.data.type,
        isLogin: true,
      })
      localStorage.setItem("token", res.data.data.token)
      await ElMessageBox.alert('登录成功', '欢迎回来', {type: 'success'})
      changeUrl('/home')
    } else {
      await ElMessageBox.alert('账号或密码错误', '请重新输入', {type: 'warning'})
    }
  } catch (e) {
    ElMessage.error('请求出错')
    console.log(e)
  }

}

const changeUrl = (url) => {
  router.replace(url);
};

const options = {
  fpsLimit: 60,
  interactivity: {
    detectsOn: "canvas",
    events: {
      onClick: {
        // 开启鼠标点击的效果
        enable: true,
        mode: "push",
      },
      onHover: {
        // 开启鼠标悬浮的效果(线条跟着鼠标移动)
        enable: true,
        mode: "grab",
      },
      resize: true,
    },
    modes: {
      // 配置动画效果
      bubble: {
        distance: 400,
        duration: 2,
        opacity: 0.8,
        size: 40,
      },
      push: {
        quantity: 4,
      },
      grab: {
        distance: 200,
        duration: 0.4,
      },
      attract: {
        // 鼠标悬浮时，集中于一点，鼠标移开时释放产生涟漪效果
        distance: 200,
        duration: 0.4,
        factor: 5,
      },
    },
  },
  particles: {
    color: {
      value: "#BA55D3", // 粒子点的颜色
    },
    links: {
      color: "#FFBBFF", // 线条颜色
      distance: 150, //线条距离
      enable: true,
      opacity: 0.4, // 不透明度
      width: 1.2, // 线条宽度
    },
    collisions: {
      enable: true,
    },
    move: {
      attract: { enable: false, rotateX: 600, rotateY: 1200 },
      bounce: false,
      direction: "none",
      enable: true,
      out_mode: "out",
      random: false,
      speed: 0.5, // 移动速度
      straight: false,
    },
    number: {
      density: {
        enable: true,
        value_area: 800,
      },
      value: 80, //粒子数
    },
    opacity: {
      //粒子透明度
      value: 0.7,
    },
    shape: {
      //粒子样式
      type: "star",
    },
    size: {
      //粒子大小
      random: true,
      value: 3,
    },
  },
  detectRetina: true,
};
</script>

<template>
  <div class="login">
    <Particles id="tsparticles" class="login__particles" :options="options" />

    <div class="loginPart">
      <h2>用户登录</h2>
      <el-form
          :model="loginForm"
          ref="loginFormRef"
          :rules="rules"
          label-width="100px"
          style="transform: translate(-30px)"
      >
        <el-form-item label="账号" prop="account">
          <el-input
              v-model="loginForm.account"
              placeholder="请输入账号"
              clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
              type="password"
              v-model="loginForm.password"
              placeholder="请输入密码"
              show-password
              clearable
              @keyup.enter="login"
          ></el-input>
        </el-form-item>

        <el-button
            class="btn"
            type="primary"
            @click="login"
            auto-insert-space
            @keyup.enter="login"
        >登录</el-button
        >
        <div style="text-align: right; transform: translate(0, 30px)">
          <el-link
              type="danger"
              @click="changeUrl('/forget')"
              style="margin-right: 140px"
          >
            忘记密码？
          </el-link>

          <el-link type="warning" @click="changeUrl('/common/register')"
          >没有账号？去注册</el-link
          >
        </div>
      </el-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login {
  height: 100vh; /* 确保登录页面全屏显示 */
  width: 100vw;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login__particles {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("@/assets/bg.jpeg");
  opacity: 0.9;
  z-index: -1; /* 确保背景在最底层 */
}

.loginPart {
  position: relative;
  width: 450px;
  padding: 50px;
  background: rgba(255, 204, 255, 0.3);
  box-sizing: border-box;
  box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.5);
  border-radius: 15px;
}


h2 {
  margin: 0 0 30px;
  padding: 0;
  color: #fff;
  text-align: center;
  /*文字居中*/
}

.btn {
  transform: translate(170px);
  width: 80px;
  height: 40px;
  font-size: 15px;
}
</style>